<template>
  <div>
    <div class="filter-container">
      <el-input v-model="listQuery.personnelId" placeholder="ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findList">
        查找
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>



      <el-table
        :key="list.personnelId"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="员工Id" min-width="100px">
          <template slot-scope="{row}">
            <span class="link-type" >{{ row.personnelId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="基本工资" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="补贴" width="100px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.subsidy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖金" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.rewardSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总工资" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sum }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)" >
              Edit
            </el-button>
            <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row.personnelId)">
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[20, 30, 50,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm"  :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="员工ID" prop="personnelId">
          <el-input v-model="temp.personnelId" />
        </el-form-item>
        <el-form-item label="基本工资" prop="baseSalary">
          <el-input required v-model.number="temp.baseSalary" />
        </el-form-item>
        <el-form-item label="补贴" prop="subsidy">
          <el-input v-model.number="temp.subsidy" />
        </el-form-item>
        <el-form-item label="奖金" prop="rewardSalary">
          <el-input v-model.number="temp.rewardSalary" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getList,addData,deleteData} from '@/api/salary'

export default{
  data(){
    return{
      list:[],
      listLoading:true,
      total: 0,
      dialogFormVisible:false,
      listQuery: {
        page: 1,
        limit: 20,
        personnelId: ''
      },
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      temp:{

      },
      rules:{
        personnelId:[
          {required: true, message: '请输入员工ID'}
        ]
      }
    }
  },
  created(){
    this.findList()
  },
  inject: ['reload'],
  methods:{
    findList(){
      console.log("finList")
        this.listLoading = true,
        getList(this.listQuery).then(response=>{
          setTimeout(()=>{
            this.list=response.data.content
            this.total = response.data.total
            this.listLoading = false
          },10)

        })
    },

    resetTemp() {
      this.temp = {
        personnelId: 0,
        dateCome:'',
        personnelName: '',
        salary:undefined,
        position:'',
        department:'',
        sex:''
      }
    },
    handleCreate(){
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // this.$refs['dataForm'].clearValidate()
    },
    createData(){
      this.listLoading = true,
        this.temp.dateCome=this.dateFormat(this.temp.dateCome)
      addData(this.temp).then(response=>{
        this.listLoading = false
        this.$message({
          message:response.message,
          type:'success'
        })
        this.findList()
        this.dialogFormVisible=false
      })
    },
    dateFormat(time) {
      var date=new Date(time);
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    updateData(){
      addData(this.temp).then(response=>{
        this.dialogFormVisible=false
        this.$message({
          message:response.message,
          type:'success'
        })
        this.findList()
      })
    },
    handleDelete(id){
      deleteData(id)
      this.list=this.list.filter((o)=>{
        return o.personnelId!=id
      })
    },
    handleSizeChange(val){
      this.listQuery.limit=val
      this.findList()
    },
    handleCurrentChange(val){
      this.listQuery.page=val
      this.findList()
    },

  }

}
</script>

<style>
</style>

